/*
 * Description: 容器
 * Author: wangyifei
 * DateCreated: 2024-04-12 10:27
 */

import { type PropsWithChildren } from 'react';
import { useDroppable } from '@dnd-kit/core';
import { DroppableStyle } from '../style';

const Droppable = (props: PropsWithChildren<{ id?: string | number }>) => {
	const { id = 'droppable' } = props;

	const { isOver, setNodeRef } = useDroppable({ id });
	const style = {
		color: isOver ? 'green' : undefined
	};

	return (
		<div ref={setNodeRef} className="droppable-item" style={style}>
			<DroppableStyle>{props.children}</DroppableStyle>
		</div>
	);
};

export default Droppable;
